<template>
  <div>
    <div class="test">
      <hts-search
        :columns="searchColumn"
        :show-label="false"
        :buttons="buttons"
        @search="onSearch"
        :selection="selection"
        @test="onTest"
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      selection: { select: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }
    };
  },
  computed: {
    buttons() {
      return [
        { event: 'test', label: '导 出' },
        { event: 'test1', label: '导 出1' },
        { event: 'test1', label: '导 出1' },
        { event: 'test1', label: '导 出1' }
      ];
    },
    searchColumn() {
      return [
        { type: 'input', field: 'input1', label: '关键字', col: 3 },
        { type: 'input', field: 'input2', label: '关键字', col: 3 },
        { type: 'daterange', field: 'daterange1,daterange2', label: '关键字', col: 6 },
        { type: 'date', field: 'date', label: '关键字', col: 3 },
        {
          type: 'select',
          field: 'select',
          label: '关键字',
          col: 3
        }
      ];
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSearch(e) {
      console.log(e);
    },
    onTest() {
      alert('导出');
    }
  }
};
</script>

<style scoped lang="scss">
.test {
  padding: 30px;
  background: #fff;
}
</style>
